<template>
    <div id="feedback">
        <form ref="feedbackForm">
            <h1>请写下你的建议：</h1>
            <el-row style="text-align: center">
                <el-input
                    id="feedbackArea"
                    type="textarea"
                    :rows="10"
                    placeholder="请输入你的改进建议"
                    maxlength="500"
                    minlength="5"
                    show-word-limit
                    v-model="feedbackText"
                    ref="feedbackArea"
                    v-resize="DomResize">
                </el-input>
            </el-row>
            <el-row>
                联系方式:
                <span>
                    <el-input
                        id="connetMethod"
                        placeholder="请输入联系方式"
                        maxlength="5"
                        minlength="4"
                        show-word-limit
                        v-model.trim="connetMethod"
                        clearable>
                    </el-input>
                </span>
                {{ connetMethod }}
            </el-row>
            <el-row style="text-align: center">
                <el-button type="primary" @click="submitForm">提交</el-button>
            </el-row>
        </form>
    </div>
</template>

<script>
export default {
    name: "Feedback",
    data() {
        return {
            feedbackText: "",
            connetMethod: ""
        }
    },
    mounted() {

    },
    methods: {
        submitForm() {
            const flag = this.$refs["feedbackForm"].validate();
            alert(flag);
        },
        resizeTextarea() {
            // console.log("文本框高度改变了")
        },
        DomResize(data) {

            let {width, height} = data;
            console.log("width:", width, "height:", height, "   dom尺寸方式改变");
            /*if(this.myChart){
                this.myChart.resize()
            }*/
            if(height >= "480px") {
                console.log("超长了")
            }
        },
    },
    directives: {
        resize: { // 指令的名称
            bind(el, binding) { // el为绑定的元素，binding为绑定给指令的对象
                console.log(el, "绑定", binding);
                let width = "", height = "";

                function isReize() {
                    console.log("触发了isResize方法");
                    const style = document.defaultView.getComputedStyle(el);
                    if (width !== style.width || height !== style.height) {
                        binding.value({width: style.width, height: style.height});  // 关键(这传入的是函数,所以执行此函数)
                    }
                    width = style.width;
                    height = style.height;
                }

                // 给绑定的元素绑定定时器，定时器中进行判断，如果宽高发生变化，则执行传入的方法
                el.__vueSetInterval__ = setInterval(isReize, 300);
            },
            unbind(el) {
                console.log(el, "解绑");
                // 解绑（销毁组件）时清除定时器
                // 如果不清除，即使组件销毁了，定时器仍会执行
                clearInterval(el.__vueSetInterval__);
            }
        }
    },
}
</script>

<style scoped>

.el-input {
    width: 180px;
    margin-left: 20px;
    margin-right: 20px;
}

.el-textarea {
    width: 90%;
}

.el-row {
    margin-top: 30px;
}

#feedback {
    position: absolute;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

h1 {
    font-family: "huyou", serif;
    font-weight: bolder;
}

#connetMethod {
    width: 120px;
}

</style>
